<template>
  <div class="zk-group-report" :style="'height:' + bodyHeight + 'px;'">
    <div class="group-report_cot">
      <div class="group-report_left" v-if="leftSymbolPoints">
        <div class="group-report_ipt">
          <div style="margin-top: 1px;">
            <x-select v-model="searchModel.timeFrame" @change="init" type="timeFrame" slot="prepend" placeholder="请选择"
              size="medium" style="width: 70px;"></x-select>
            <el-input placeholder="请输入内容" v-model="searchModel.keyword" size="medium" class="input-with-select"
              style="width: 250px;margin-left: 5px;">
              <el-button slot="append" icon="el-icon-search" @click="init"></el-button>
            </el-input>
          </div>
        </div>
        <div class="group-report_ul">
          <div class="group-report_t1" @click="groupClick(tItem, tIndex)"
            :class="currentIndex == tIndex ? 'group-report_active' : ''"
            v-for="(tItem, tIndex) in leftSymbolPoints.result" :key="tIndex">
            <i class="icon-5333-neneifen"></i>
            <div class="group-report_t2">{{ tItem.intro }}</div>
            <div class="group-report_t3">
              <div class="group-report_crtile">
              </div>
            </div>
          </div>
        </div>
        <div class="group-report_pagin" v-if="leftSymbolPoints">
          <el-pagination @current-change="sizeChange" layout="total,prev, pager, next" small
            :page-size="leftSymbolPoints.pageSize" :total="leftSymbolPoints.recordCount"></el-pagination>
        </div>
      </div>
      <div class="group-report_right">
        <x-border icon="icon-5333-caig1 " class="light">
          <div slot="headerLeftBut" class="group-report_buts">
            <span style="color: #6E7079;">开始时间：</span><el-date-picker style="width: 175px;" v-model="dataChartModel.date"
              type="datetime" size="mini" placeholder="选择日期" @change="rightInit">
            </el-date-picker>

            <el-select v-model="dataChartModel.calculator" @change="rightInit" style="margin-left:5px;width: 130px;"
              size="mini" placeholder="选择计算器">
              <el-option v-for="item in calculatorList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <x-select v-model="dataChartModel.way" @change="rightInit" style="margin-left:5px;width: 130px;"
              type="OrderWay1" size="mini">

            </x-select>
            <el-input-number v-model="dataChartModel.count" :step="1000" style="margin-left:5px;" size="mini" :min="1"
              :max="1000000" @change="rightInit"></el-input-number>
            <el-button type="primary" size="mini" @click="rightInit"
              style="margin-left:5px;height: 28px;padding-top: 8px;">
              AI入场</el-button>

          </div>
          <div style="padding: 20px; height: 400px;" v-loading="!async" v-if="viewModel">
            <count-report v-model="viewModel" ref="countReport"></count-report>
          </div>
        </x-border>

        {{ viewModel.result }}
        <x-border title="AI交易" icon="icon-5333-wubfen" type="light">

          <el-table :data="viewModel.orders" style="width: 100%" :row-class-name="tableRowClassName"
            v-if="viewModel && viewModel.orders">
            <el-table-column label="orderWay">
              <template slot-scope="scope">
                {{ scope.row.orderWay === 1 ? 'Sell' : 'Buy' }}
              </template>
            </el-table-column>
            <el-table-column prop="openTime" label="openTime" width="150">
            </el-table-column>
            <el-table-column prop="openPrice" label="openPrice" width="95">
            </el-table-column>
            <el-table-column prop="openScore" label="openScore" width="95">
            </el-table-column>
            <el-table-column label="closeTime" width="150">
              <template slot-scope="scope">
                {{ scope.row.isClose === false ? '' : scope.row.closeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="closePrice" label="closePrice" width="95">
            </el-table-column>
            <el-table-column prop="closeScore" label="closeScore" width="95">
            </el-table-column>
            <el-table-column prop="calculatorCount" label="count" width="95">
            </el-table-column>
            <el-table-column prop="takeProfitPoints" label="takeProfitPoints" width="95">
            </el-table-column>
            <!-- <el-table-column prop="formula" label="Formula">
            </el-table-column> -->
            <el-table-column label="takeProfitPoints">
              <template slot-scope="scope">
                <span v-if="scope.row.takeProfitPoints >= 0" style="color: green; font-weight: bold;">{{
                  scope.row.takeProfitPoints }}</span>
                <span v-else style="color: red; font-weight: bold;">{{ scope.row.takeProfitPoints }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="diffMinutes" label="diffMinutes" width="95">
            </el-table-column>
            <el-table-column prop="diffHour" label="diffHour" width="95">
            </el-table-column>
            <el-table-column prop="diffDay" label="diffDay(天)" width="95">
            </el-table-column>
          </el-table>
        </x-border>
      </div>
    </div>
  </div>
</template>

<script>
import service from './service'
import countReport from './styles/count-report'
export default {
  components: {
    countReport
  },
  data() {
    return {
      searchModel: {
        pageIndex: 1,
        pageSize: 16,
        keyword: '',
        timeFrame: -1
      },
      dataChartModel: {
        //当前时间减5天,转成时间格式 2021-01-01 00:00:00
        //date: new Date(new Date().getTime() - 8 * 24 * 60 * 60 * 1000),
        date: '2025-06-09 12:00:00',
        count: 100,
        calculator: 5,
        way: 3,
        timeFrame: 0,
        symbolPointId: ''
      },
      calculatorList: [
        {
          value: 5,
          label: '计算器5'
        },
        {
          value: 1,
          label: '计算器1'
        },
        {
          value: 4,
          label: '计算器4'
        },
        {
          value: 9,
          label: '计算器9'
        },
        {
          value: 10,
          label: '计算器10'
        }
      ],
      viewModel: null,
      loading: false,
      leftSymbolPoints: null,
      currentIndex: 0,
      async: false,
      inputValue: '',
      bodyHeight: 0
    }
  },
  created() {
    this.bodyHeight = window.document.body.clientHeight - 50
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.leftSymbolPoints = await service.leftSymbolPoints(this.searchModel)
      if (this.leftSymbolPoints && this.leftSymbolPoints.result[0]) {
        this.dataChartModel.id = this.leftSymbolPoints.result[0].id
        await this.rightInit()
      }
    },

    async sizeChange(e) {
      this.currentIndex = 0
      this.searchModel.pageIndex = e
      this.leftSymbolPoints = await service.leftSymbolPoints(this.searchModel)
    },
    async groupClick(gValue, tIndex) {
      this.dataChartModel.id = gValue.id
      this.currentIndex = tIndex
      this.dataChartModel.count = 100
      await this.rightInit()
    },
    async rightInit() {
      this.async = false
      this.viewModel = await this.$ala.httpPost('Api/HistoryBar/Report', this.dataChartModel)
      this.async = true
    },
    tableRowClassName({ row }) {
      if (!row.isClose) {
        return 'success-row';
      }
      return '';
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #ff0000;
}

@import "./var.scss";
</style>
